<form class="enable-dpm-form" role="form" autocomplete="off" ng-submit="onEnableDPMSubmit()">
  <div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h3 class="modal-title" translate="home.enableDPM.headerLabel">Enable Control Hub</h3>
  </div>
  <div class="modal-body">

    <ng-include src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>

    <div ng-if="!dpmEnabled">
      <ul class="properties clearfix">
        <li class="pull-right">
          <span class="properties-label">Don't have an account? <a href="https://streamsets.com/dpm-signup" target="_blank">Click here</a> to learn more. </span>
        </li>
      </ul>

      <div class="form-group">
        <label class="control-label" translate="home.enableDPM.dpmBaseURL">Control Hub URL</label>
        <input type="text"
               autocomplete="new-password"
               ng-disabled="isEnableInProgress"
               name="name"
               class="form-control"
               ng-required
               placeholder="{{'home.enableDPM.dpmBaseURLPlaceholder' | translate}}"
               ng-model="dpmInfoModel.baseURL">
      </div>

      <div class="form-group">
        <label class="control-label" translate="home.enableDPM.dpmUserName">Control Hub User Name</label>
        <input type="text"
               autocomplete="new-password"
               ng-disabled="isEnableInProgress"
               autofocus
               name="dpmUserID"
               class="form-control"
               required
               pattern="[a-zA-Z_-0-9\.]+@[a-zA-Z_-0-9\.]+$"
               title="User ID must be <ID>@<Organization ID>, IDs must be a alphanumeric characters, underscores, hyphens and dots"
               placeholder="{{'home.enableDPM.dpmUserNamePlaceholder' | translate}}"
               ng-model="dpmInfoModel.userID">
      </div>

      <div class="form-group">
        <label class="control-label" translate="home.enableDPM.dpmUserPassword">Control Hub User Password</label>
        <input type="password"
               autocomplete="new-password"
               ng-disabled="isEnableInProgress"
               name="dpmUserPassword"
               class="form-control"
               required
               placeholder="{{'home.enableDPM.dpmUserPasswordPlaceholder' | translate}}"
               ng-model="dpmInfoModel.userPassword">
      </div>

      <div class="form-group">
        <label class="control-label" translate="global.form.dataCollectorLabels">Labels for this Data Collector</label>

        <ui-select multiple
                   tagging
                   tagging-label=" - new label"
                   ng-disabled="isEnableInProgress"
                   tagging-tokens=",|ENTER"
                   ng-model="dpmInfoModel.labels">
          <ui-select-match class="ui-select-match">{{$item}}</ui-select-match>
          <ui-select-choices class="ui-select-choices"
                             repeat="listValue in dpmInfoModel.labels | filter:$select.search">
            <div ng-bind-html="listValue | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>

      </div>

    </div>

    <div ng-if="(dpmEnabled && !isRestartInProgress)" >
      <div class="alert alert-success alert-dismissible" role="alert">
        <ul class="clearfix">
          <li>
            <span translate="home.enableDPM.successMessage"></span>
          </li>
          <li>
            <span><a href="javascript:;" ng-click="onCreateDPMUsersClick()">Click here</a>
              to create a Control Hub user account for each Data Collector user account.</span>
          </li>
          <li>
            <span translate="home.enableDPM.restartMessage"></span>
          </li>
        </ul>
      </div>
      <ng-include src="'common/administration/enableDPM/restartDPM.tpl.html'"></ng-include>
    </div>

    <div ng-if="dpmEnabled && !isRestartInProgress && !isStatsLibraryInstalled"
         class="alert alert-info alert-dismissible"
         role="alert"
         translate="home.enableDPM.installStatsLibraryMessage">
    </div>

    <div class="alert alert-success alert-dismissible"
         role="alert"
         ng-show="isRestartInProgress"
         translate="home.restart.successMessage">
    </div>

  </div>
  <div class="modal-footer">
    <button type="reset" class="btn btn-default" ng-click="cancel()"
            ng-if="!isEnableInProgress && !(dpmEnabled && !isRestartInProgress)"
            translate="global.form.cancel">Cancel</button>

    <button class="btn btn-primary"
            ng-click="onInstallStatisticsLibraryClick()"
            ng-if="!isEnableInProgress && dpmEnabled && !isRestartInProgress && !isStatsLibraryInstalled"
            translate="home.enableDPM.installStatistics">Install Statistics Library</button>

    <button type="submit" class="btn btn-primary"
            ng-if="!isEnableInProgress && !dpmEnabled"
            translate="global.form.enable">Enable</button>

    <button class="btn btn-primary"
            ng-if="isEnableInProgress && !dpmEnabled"
            disabled
            translate="home.enableDPM.isEnableInProgress">Enabling Control Hub...</button>
  </div>
</form>
